<template>
  <div id="invReaStDiv">
    <Breadcrumb content="效期查询" />
    <div class="bodyContent">
      <vxe-form :data="searchForm" class="searchform form-input-m">
        <vxe-form-item title="截止日期">
          <el-date-picker v-model="searchForm.expiryDate" :value-format="'YYYY-MM-DD HH:mm:ss'" type="datetime" :shortcuts="shortcuts" />
        </vxe-form-item>
        <vxe-form-item>
          <vxe-button type="text" class="button-blue" icon="vxe-icon-search" content="查询" :loading="tloading" @click="findReagentStockList"></vxe-button>
        </vxe-form-item>
      </vxe-form>
      <div class="tableBox">
        <vxe-table ref="invReagentTableRef" :data="reagentStocList" :loading="tloading" @current-change="invReagentRowClick" :span-method="mergeRowMethod" class="mytable-scrollbar" border align="center" height="auto" :row-config="{ isCurrent: true, isHover: true }" :column-config="{ resizable: true }" resizable show-overflow keep-source>
          <vxe-column type="checkbox" width="30"></vxe-column>
          <vxe-column field="reaNo" title="商品编号" width="80">
          </vxe-column>
          <vxe-column field="reaNa" title="商品名称" width="200">
          </vxe-column>
          <vxe-column field="storeName" title="仓库" width="200">
          </vxe-column>
          <vxe-column field="manufacturerName" title="生产厂家" width="150">
          </vxe-column>
          <vxe-column field="batchNum" title="批号" width="100">
          </vxe-column>
          <vxe-column field="produceDate" title="生产日期" width="100"> </vxe-column>
          <vxe-column field="expiryDate" title="失效日期" width="100"> </vxe-column>

          <vxe-column field="quantity" title="在库数量" width="100"></vxe-column>
          <vxe-column field="inQuantity" title="入库数量" width="100"></vxe-column>
          <vxe-column field="outQuantity" title="出库数量" width="100"></vxe-column>
          <vxe-column field="price" title="单价" width="100"> </vxe-column>
          <vxe-column field="unit" title="单位" width="120"> </vxe-column>

        </vxe-table>
      </div>
    </div>
  </div>
</template>
<script setup lang="ts">
// 引入组件区 ==========
import { ref, reactive, getCurrentInstance, onMounted } from 'vue';
import Breadcrumb from '@/components/Breadcrumb.vue';
import { Splitpanes, Pane } from 'splitpanes';
let { proxy }: any = getCurrentInstance();
import { VxeMessage, VxeNotifyType } from '@/utils/CommonMessage'; //提示框
import { isEmpty } from 'lodash';
import VxePulldownSelectionWithNa from '@/components/VxePulldownSelectionWithNa.vue';
import moment from 'moment';

// 全局变量定义区 ==========

let searchForm = reactive({
  expiryDate: moment().format('YYYY-MM-DD HH:mm:ss')
});

let defaultProps = {
  children: 'children',
  label: 'storeName'
};
let tloading = ref(false); //刷新加载状态
let reagentStocList: any = reactive([]);
let invStoreList: any = reactive([]);

// 方法定义区 =============
// 页面加载时更新组织机构列表(左侧)
onMounted(() => {
  findReagentStockList();
});
// 回车查询
function keyupEnter(e: any) {
  if (e.$event.code == 'Enter') {
    findReagentStockList();
  }
}
function findReagentStockList() {
  tloading.value = true;
  reagentStocList.length = 0; //放入数据前清空数据
  const url = '/inv/invReagentStock/findReagentStockExpiryList';
  proxy.$http
    //注意此处的数据条数
    .get(url, {
      params: {
        expiryDate: searchForm.expiryDate
      }
    })
    .then((res: any) => {
      reagentStocList.push(...res.data);

      tloading.value = false;
    })
    .catch((err: any) => {
      tloading.value = false;
      // VxeMessage('获取获取当前字典的规则列表失败',VxeNotifyType.error)
    });
}

function mergeRowMethod({ row, _rowIndex, column, visibleData }) {
  const fields = ['reaNo', 'reaNa'];
  const cellValue = row[column.field];
  if (cellValue && fields.includes(column.field)) {
    const prevRow = visibleData[_rowIndex - 1];
    let nextRow = visibleData[_rowIndex + 1];
    if (prevRow && prevRow[column.field] === cellValue) {
      return { rowspan: 0, colspan: 0 };
    } else {
      let countRowspan = 1;
      while (nextRow && nextRow[column.field] === cellValue) {
        nextRow = visibleData[++countRowspan + _rowIndex];
      }
      if (countRowspan > 1) {
        return { rowspan: countRowspan, colspan: 1 };
      }
    }
  }
}
</script>

<style lang="scss" scoped>
#invReaStDiv {
  width: 100%;
  height: 100%;

  .bodyContent {
    height: calc(100% - 60px);
    // 附加按钮间距
    .button-blue {
      margin: 5px 0 5px 5px;
    }
    .button-red {
      margin: 5px 0 5px 5px;
    }
    .searchform {
      padding: 10px 0 0 10px;

      :deep(.vxe-form--item) {
        margin-right: 30px;
      }
    }

    .searchform .vxe-input {
      --el-input-width: 120px;
    }

    .searchform .vxe-select {
      --el-select-width: 120px;
    }

    .tableBox {
      height: calc(100% - 40px);
      background-color: $base-white;
    }

    .el-tabs {
      height: 100%;
      // 右侧保存按钮
      .saveBtn {
        margin: 0px 30px;
      }
    }
  }
}
</style>
